<template>
    <div>
        <el-row>
            <el-col :xs="12" :sm="12" :md="12" :lg="6" v-for="item in dataList" :key="item.title">
                <div class="box">
                    <div class="data">
                        <i class="iconfont" :class="item.icon"></i>
                        <div class="datanNum">
                            <span>{{item.title}}</span>
                            <span>{{item.num}}</span>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="8">
                <div ref="pie" class="chartBox"></div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8">
                <div class="chart-wrapper chartMargin">
                <div ref="zhe1" class="chartBox"></div>
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8">
                <div class="chart-wrapper">
                <div ref="zhe2" class="chartBox"></div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    name:"index",
    data() {
        return {
            chart:null,
            zhechart1:null,
            zhechart2:null,
            dataList:[
                {title:'会员总数', num:'0', icon:'icon-iconleijihuiyuan'},
                {title:'订单总数', num:'0', icon:'icon-dingdan'},
                {title:'总金额', num:'0', icon:'icon-qianbao1'},
                {title:'商品总数', num:'0', icon:'icon-gouwuche'},
                {title:'今日订单数', num:'0', icon:'icon-jintian'},
                {title:'昨日订单数', num:'0', icon:'icon-riqi'},
                {title:'近七天订单数', num:'0', icon:'icon-qitianwuliyoutuihuanhuo'},
                {title:'本月订单数', num:'0', icon:'icon-rili'},
            ]
        }
    },
    mounted() {
       this.echartsinit1()
       this.echartsinit2()
       this.echartsinit3()
        window.addEventListener('resize', this.handleResizeDebounced)
    },
    methods: {
        // 饼状图
        echartsinit1(){
            var chartDom = this.$refs.pie;
            this.chart = this.$echarts.init(chartDom);
            var option;

            option = {
            tooltip: {
                trigger: 'item',
                backgroundColor: 'rgba(0,0,0,.5)',
                textStyle: { color: '#fff' }
            },
            color: ['#32C6CA', '#B6A2DD'],
            legend: {
                bottom: '0%',
                left: 'center'
            },
            series: [
                {
                roseType: 'radius',
                name: '商品分类销售占总销售的比例',
                type: 'pie',
                radius: ['20%', '70%'],
                data: [
                    { value: 8, name: '名片' },
                    { value: 47, name: '平面设计1' }
                ]
                }
            ]
            };
            option && this.chart.setOption(option);
            this.handleResize()
        },
        echartsinit2(){
            const chartContainer = this.$refs.zhe1;
            this.zhechart1=this.$echarts.init(chartContainer);
            const option = {
                title: {
                    text: '本月成交额',
                    textStyle:{
                        fontSize:16,
                        fontWeight:"normal"
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: ['4-15', '4-16', '4-17', '4-18', '4-19', '4-20'],
                    axisLabel:{
                        interval: 0
                    },
                    boundaryGap: false,
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    max: 250,
                    interval: 50
                },
                series: [{
                    type: 'line',
                    smooth: true,
                    data: [0, 246, 0, 90, 28, 0,0,50],
                    itemStyle: {
                    color: '#2EC7C9'
                    }
                }]
                };
                // 使用刚指定的配置项和数据显示图表
                this.zhechart1.setOption(option);
        },
        echartsinit3(){
            const chartContainer = this.$refs.zhe2;
            this.zhechart2=this.$echarts.init(chartContainer);
            const option = {
                title: {
                    text: '本月订单数',
                    textStyle:{
                        fontSize:16,
                        fontWeight:"normal"
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: ['4-15', '4-16', '4-17', '4-18', '4-19', '4-20'],
                    axisLabel:{
                        interval: 0
                    },
                     boundaryGap: false,
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    max: 20,
                    interval: 5
                },
                series: [{
                    type: 'line',
                    smooth: true,
                    data: [5,20,3,17,3,2,1,3,4],
                    itemStyle: {
                    color: '#2EC7C9'
                    }
                }]
                };
                // 使用刚指定的配置项和数据显示图表
                this.zhechart2.setOption(option);
        },
        // echarts响应式自适应
        handleResize() {
            if (this.chart&&this.zhechart1&&this.zhechart2) {
                this.chart.resize()
                this.zhechart1.resize()
                this.zhechart2.resize()
            }
        },
        handleResizeDebounced() {
            if (this.resizeTimer) {
                clearTimeout(this.resizeTimer)
            }
            this.resizeTimer = setTimeout(() => {
                this.handleResize()
            },5)
        },
        },
        // 清空内存
        beforeDestroy() {
        //     window.removeEventListener('resize', this.handleResizeDebounced)
        //     this.chart.dispose()
        //     this.chart=null
        },
}
</script>
<style lang="less" scoped>
    .chart-wrapper{
        background: #fff;
        padding: 16px 16px 0;
        margin-bottom: 32px;
    }
    .datanNum{
        display: flex;
        flex-direction: column;
        span:first-child{
            font-size: 15px;
            color: #8C8C8C;
            font-weight: bold;
            margin-bottom: 12px;
        }
        span:last-child{
            color: #666666;
            font-size: 18px;
            font-weight: bold;
        }
    }
    .box{
        padding: 0 20px;
        margin-bottom: 30px;
    }
    .data{
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0 26px;
        justify-content: space-between;
        height: 108px;
        cursor: pointer;
        font-size: 12px;
        position: relative;
        overflow: hidden;
        background: #fff;
        box-shadow: 4px 4px 40px rgba(0,0,0,.05);
        border-color: rgba(0,0,0,.05);
        i{
            font-size: 50px;
        }
        .icon-iconleijihuiyuan{
            color: #40C9C6!important;
        }
        .icon-dingdan{
            color: #36A3F7!important;
        }
        .icon-qianbao1{
            color: #F4516C!important;
        }
        .icon-gouwuche{
            color: #34BFA3!important;
        }
        .icon-jintian{
            color: #D4237A!important;
        }
        .icon-riqi{
            color: #1296DB!important;
        }
        .icon-qitianwuliyoutuihuanhuo{
            color: #D81E06!important;
        }
        .icon-rili{
            color: #1296DB!important;
        }
    }
    .chartBox{
        width: 100%;
        height: 300px;
    }
    .chartMargin{
        margin-right: 20px;
    }
</style>